import {
  getEnergyInfoByPage,
  addEnergyInfo,
  updateEnergyInfo,
  uploadEhsFile,
  getDeIds,
  delEnergyInfo,
  getDictDataByPageAndDictType,
  exportEnergyInfo,
} from '@/services/device/energyInfo';
import { PlusOutlined } from '@ant-design/icons';
import { tableSearchPublicConfig } from '@/utils/filterUtils';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Row, Col, Tabs, Tree, Select } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import type { tabType } from '@/pages/product/components/interfaceProduct';
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import moment from 'moment';
import { values } from 'lodash';
const EnergyInfo: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const actionRef_2 = useRef<ActionType>();
  const actionRef_3 = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [modalVisit2, setModalVisit2] = useState(false); // 新建和编辑提示框
  const [modalVisit3, setModalVisit3] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [confirmLoading2, setConfirmLoading2] = useState(false);
  const [confirmLoading3, setConfirmLoading3] = useState(false);
  const [formTitle, setFormTitle] = useState(''); //
  const [formTitle2, setFormTitle2] = useState(''); //
  const [formTitle3, setFormTitle3] = useState(''); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [unit, setUnit] = useState();
  const [orderOptions, setOrderOptions] = useState(); //工序
  const [deviceId, setDeviceId] = useState(); //获取设备id
  const [form] = Form.useForm();
  const ref = useRef(null);
  const yearColumns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    /* {
      title: '唯一标识',
      dataIndex: 'uniqueIdentifier',
      hideInTable: tru e,
    }, */
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      align: 'center',
      sorter: true,
    },
    {
      title: '设备编号',
      dataIndex: 'deviceId',
      align: 'center',
      sorter: true,
    },
    {
      title: '生产区域',
      dataIndex: 'area',
      search: false,
      align: 'center',
      sorter: true,
    },

    {
      title: '能源介质',
      dataIndex: 'energyItem',
      align: 'center',
      sorter: true,

      valueType: 'select',
      fieldProps: {
        options: [
          {
            label: '水',
            value: '水',
          },
          {
            label: '电',
            value: '电',
          },
          {
            label: '气',
            value: '气',
          },
        ],
      },
    },
    {
      title: '计量周期',
      dataIndex: 'period',
      align: 'center',
      sorter: true,
    },
    /*     {
      title: '计量刻度',
      dataIndex: 'scale',
     align: 'center',sorter: true, 
    }, */
    {
      title: '计量值',
      search: false,
      dataIndex: 'value',
      align: 'center',
      sorter: true,
    },
    {
      title: '计量单位',
      align: 'center',
      sorter: true,
      search: false,
      dataIndex: 'unit',
    },

    /* {
      title: '年',
      dataIndex: 'year',
     align: 'center',sorter: true, 
    },
    {
      title: '月',
      dataIndex: 'month',
     align: 'center',sorter: true, 
    },
    {
      title: '日',
      dataIndex: 'day',
     align: 'center',sorter: true, 
    }, */

    {
      title: '创建日期', //表头显示的名称
      search: false,

      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      render: (text, record) => <div>{moment(text).format('YYYY-MM-DD')}</div>,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            setModalVisit(true);
            setCreateOrUpdate(false);
            setFormTitle('编辑');
            actionRef.current.reload();
            form.setFieldsValue({
              area: record.area,
              day: record.day,
              deviceId: record.deviceId,
              deviceName: record.deviceName,
              energyItem: record.energyItem,
              month: record.month,
              period: record.period,
              scale: record.scale,
              uniqueIdentifier: record.uniqueIdentifier,
              unit: record.unit,
              updateBy: record.updateBy,
              value: record.value,
              year: record.year,
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delEnergyInfo({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  const monthColumns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    /* {
      title: '唯一标识',
      dataIndex: 'uniqueIdentifier',
      hideInTable: tru e,
    }, */
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      align: 'center',
      sorter: true,
    },
    {
      title: '设备编号',
      dataIndex: 'deviceId',
      align: 'center',
      sorter: true,
    },
    {
      title: '生产区域',
      dataIndex: 'area',
      search: false,
      align: 'center',
      sorter: true,
    },

    {
      title: '能源介质',
      dataIndex: 'energyItem',
      align: 'center',
      sorter: true,

      valueType: 'select',
      fieldProps: {
        options: [
          {
            label: '水',
            value: '水',
          },
          {
            label: '电',
            value: '电',
          },
          {
            label: '气',
            value: '气',
          },
        ],
      },
    },
    {
      title: '计量周期',
      dataIndex: 'period',
      align: 'center',
      sorter: true,
    },
    /*     {
      title: '计量刻度',
      dataIndex: 'scale',
     align: 'center',sorter: true, 
    }, */
    {
      title: '计量值',
      search: false,
      dataIndex: 'value',
      align: 'center',
      sorter: true,
    },
    {
      title: '计量单位',
      align: 'center',
      sorter: true,
      search: false,
      dataIndex: 'unit',
    },

    /* {
      title: '年',
      dataIndex: 'year',
     align: 'center',sorter: true, 
    },
    {
      title: '月',
      dataIndex: 'month',
     align: 'center',sorter: true, 
    },
    {
      title: '日',
      dataIndex: 'day',
     align: 'center',sorter: true, 
    }, */

    {
      title: '创建日期', //表头显示的名称
      search: false,

      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      render: (text, record) => <div>{moment(text).format('YYYY-MM-DD')}</div>,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            setModalVisit(true);
            setCreateOrUpdate(false);
            setFormTitle('编辑');
            actionRef.current.reload();
            form.setFieldsValue({
              area: record.area,
              day: record.day,
              deviceId: record.deviceId,
              deviceName: record.deviceName,
              energyItem: record.energyItem,
              month: record.month,
              period: record.period,
              scale: record.scale,
              uniqueIdentifier: record.uniqueIdentifier,
              unit: record.unit,
              updateBy: record.updateBy,
              value: record.value,
              year: record.year,
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delEnergyInfo({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  const dayColumns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    /* {
      title: '唯一标识',
      dataIndex: 'uniqueIdentifier',
      hideInTable: tru e,
    }, */
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      align: 'center',
      sorter: true,
    },
    {
      title: '设备编号',
      dataIndex: 'deviceId',
      align: 'center',
      sorter: true,
    },
    {
      title: '生产区域',
      dataIndex: 'area',
      search: false,
      align: 'center',
      sorter: true,
    },

    {
      title: '能源介质',
      dataIndex: 'energyItem',
      align: 'center',
      sorter: true,

      valueType: 'select',
      fieldProps: {
        options: [
          {
            label: '水',
            value: '水',
          },
          {
            label: '电',
            value: '电',
          },
          {
            label: '气',
            value: '气',
          },
        ],
      },
    },
    {
      title: '计量周期',
      dataIndex: 'period',
      align: 'center',
      sorter: true,
    },
    /*     {
      title: '计量刻度',
      dataIndex: 'scale',
     align: 'center',sorter: true, 
    }, */
    {
      title: '计量值',
      search: false,
      dataIndex: 'value',
      align: 'center',
      sorter: true,
    },
    {
      title: '计量单位',
      align: 'center',
      sorter: true,
      search: false,
      dataIndex: 'unit',
    },

    /* {
      title: '年',
      dataIndex: 'year',
     align: 'center',sorter: true, 
    },
    {
      title: '月',
      dataIndex: 'month',
     align: 'center',sorter: true, 
    },
    {
      title: '日',
      dataIndex: 'day',
     align: 'center',sorter: true, 
    }, */

    {
      title: '创建日期', //表头显示的名称
      search: false,

      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      render: (text, record) => <div>{moment(text).format('YYYY-MM-DD')}</div>,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            setModalVisit(true);
            setCreateOrUpdate(false);
            setFormTitle('编辑');
            actionRef.current.reload();
            form.setFieldsValue({
              area: record.area,
              day: record.day,
              deviceId: record.deviceId,
              deviceName: record.deviceName,
              energyItem: record.energyItem,
              month: record.month,
              period: record.period,
              scale: record.scale,
              uniqueIdentifier: record.uniqueIdentifier,
              unit: record.unit,
              updateBy: record.updateBy,
              value: record.value,
              year: record.year,
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delEnergyInfo({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  let submit = {
    dictTypeId: '',
    pageEntity: {
      current: 1,
      filters: [],
      pageSize: 20,
      sorters: [],
    },
  };

  //获取单位
  const handleChange = async (value: any) => {
    console.log(`selected ${value}`);

    if (value == '气') {
      submit.dictTypeId = '8a827f828aa1786b018aa70ed54303d3';
    } else if (value == '电') {
      submit.dictTypeId = '8a827f828aa1786b018aa70eb45403d2';
    } else if (value == '水') {
      submit.dictTypeId = '8a827f828aa1786b018aa617a47803c3';
    }
    const temp: any[] = [];
    const resultOrder = await getDictDataByPageAndDictType(submit);
    console.log('收到的工序', resultOrder);
    resultOrder.data.content.map((item: any) => {
      temp.push({ label: item.keyValue, value: item.keyValue }); //label和value应该都是字符串
    });
    setOrderOptions(temp);
    //setEditWorkOrder(false);
  };

  //定义Tabs的子结构的数组
  const tabList: tabType[] = [
    {
      name: 'tab1',
      label: '巡检周期-年',
      content: (
        <div>
          <ProTable
            headerTitle="巡检周期-年"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            search={{
              labelWidth: 100,
              defaultCollapsed: true,
            }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  setCreateOrUpdate(false);
                  setFormTitle('新建');
                  form.resetFields();
                  setModalVisit(true);
                }}
                type="primary"
              >
                新建
              </Button>,
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filters = filterTran(ref.current.getFieldsValue());
                  exportEnergyInfo({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `EnergyInfo.xlsx`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>,
            ]}
            request={async (params = {}, sort, filter) => {
              const res = { ...params };
              const sorters = sortTran(sort);
              const filters = filterTran(res);
              const result = await getEnergyInfoByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              console.log('获得的数据', result);
              //getproductbop();
              //过滤后端传递的null数据
              const tableinfo1: any[] = [];
              result.data.content.map((item: any, index: number) => {
                if (item != null && item.period == '年') {
                  tableinfo1.push(item);
                }
              });
              console.log(result.data.content);
              console.log(tableinfo1);

              const resultId = await getDeIds(null);
              const tempCode: any[] = [];
              resultId.data.map((item: any) => {
                tempCode.push({ label: item, value: item });
              });
              setDeviceId(tempCode);
              console.log('获得的id', resultId);
              return {
                data: tableinfo1,
                total: tableinfo1.length,
                success: result.success,
              };
            }}
            columns={yearColumns}
            scroll={{ x: 2000, y: 450 }}
          //rowSelection={{ onChange: onSelectChange }}
          />
        </div>
      ),
    },
    {
      name: 'tab2',
      label: '巡检周期-月',
      content: (
        <div>
          <ProTable
            headerTitle="巡检周期-月"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            search={{
              labelWidth: 100,
              defaultCollapsed: true,
            }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  //setCreateOrUpdate2(false);
                  setFormTitle2('新建');
                  form.resetFields();
                  setModalVisit2(true);
                }}
                type="primary"
              >
                新建
              </Button>,
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filters = filterTran(ref.current.getFieldsValue());
                  exportEhsItem({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `EHSItem.xlsx`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>,
            ]}
            request={async (params = {}, sort, filter) => {
              const res = { ...params };
              const sorters = sortTran(sort);
              const filters = filterTran(res);
              const result = await getEnergyInfoByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              //getproductbop();
              //过滤后端传递的null数据
              const tableinfo2: any[] = [];
              result.data.content.map((item: any, index: number) => {
                if (item != null && item.period == '月') {
                  tableinfo2.push(item);
                }
              });
              console.log(result.data.content);
              console.log(tableinfo2);
              const resultId = await getDeIds(null);
              const tempCode: any[] = [];
              resultId.data.map((item: any) => {
                tempCode.push({ label: item, value: item });
              });
              setDeviceId(tempCode);
              console.log('获得的id', deviceId);
              return {
                data: tableinfo2,
                total: tableinfo2.length,
                success: result.success,
              };
            }}
            columns={monthColumns}
            scroll={{ x: 2000, y: 450 }}
          //rowSelection={{ onChange: onSelectChange }}
          />
        </div>
      ),
    },
    {
      name: 'tab3',
      label: '巡检周期-日',
      content: (
        <div>
          <ProTable
            headerTitle="巡检周期-日"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            search={{
              labelWidth: 100,
              defaultCollapsed: true,
            }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  setCreateOrUpdate(false);
                  setFormTitle3('新建');
                  form.resetFields();
                  setModalVisit3(true);
                }}
                type="primary"
              >
                新建
              </Button>,
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filters = filterTran(ref.current.getFieldsValue());
                  exportEhsStandard({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `EHSStandard.xlsx`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>,
            ]}
            request={async (params = {}, sort, filter) => {
              const res = { ...params };
              const sorters = sortTran(sort);
              const filters = filterTran(res);
              const result = await getEnergyInfoByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              //getproductbop();
              //过滤后端传递的null数据
              const tableinfo3: any[] = [];
              result.data.content.map((item: any, index: number) => {
                if (item != null && item.period == '日') {
                  tableinfo3.push(item);
                }
              });
              console.log(result.data.content);
              console.log(tableinfo3);
              const resultId = await getDeIds(null);
              const tempCode: any[] = [];
              resultId.data.map((item: any) => {
                tempCode.push({ label: item, value: item });
              });
              setDeviceId(tempCode);
              console.log('获得的id', deviceId);
              return {
                data: tableinfo3,
                total: tableinfo3.length,
                success: result.success,
              };
            }}
            columns={dayColumns}
            scroll={{ x: 2000, y: 450 }}
          //rowSelection={{ onChange: onSelectChange }}
          />
        </div>
      ),
    },
  ];

  const handleSubmit = async (values) => {
    setConfirmLoading(true);
    console.log('values', values);
    if (formTitle == '新建') {
      const result = await addEnergyInfo(values);
      console.log('结果', result);
      if (result != null) {
        message.success('添加成功');
      }
    } else {
      await updateEnergyInfo(values);
    }
    setConfirmLoading(false);
    setModalVisit(false);
    setModalVisit2(false);
    setModalVisit3(false);
    actionRef.current.reload();
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <Tabs
        style={{ backgroundColor: 'white' }}
        type="card"
        defaultActiveKey="1"
        items={tabList.map((item, i) => {
          const id = String(i + 1);
          return {
            label: item.label,
            key: id,
            children: <div>{item.content}</div>,
          };
        })}
      />
      {/* <ProTable
        headerTitle="水电气能效"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateOrUpdate(false);
              setFormTitle('新建');
              form.resetFields();
              setModalVisit(true);
            }}
            type="primary"
          >
            新建
          </Button>,
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              const filters = filterTran(ref.current.getFieldsValue());
              exportEnergyInfo({
                current: 1,
                pageSize: 5000,
                filters: filters,
              }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `EnergyInfo.xlsx`);
                aLink.click();
                document.body.removeChild(aLink);
              });
            }}
            type="primary"
          >
            导出
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTran(params);
          const result = await getEnergyInfoByPage({
            ...params,
            sorters: sorters,
            filters: filters,
          });
          console.log(result, '页面');
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
      /> */}
      {/* 年 */}
      <ModalForm
        visible={modalVisit}
        title={formTitle}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setModalVisit(false);
          },
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="uniqueIdentifier"
          label="唯一标识"
          hidden={true}
          initialValue={111}
          disabled={createOrUpdate}
        />
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="deviceName"
              label="设备名称"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
          <Col span={12}>
            <ProFormSelect
              name="deviceId"
              label="设备编号"
              disabled={createOrUpdate}
              options={deviceId}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormSelect
              name="energyItem"
              width={350}
              label="能源介质"
              disabled={createOrUpdate}
              valueEnum={{
                水: '水',
                电: '电',
                气: '气',
              }}
              rules={[{ required: true, message: '请输入 your period!' }]}
              fieldProps={{
                autoClearSearchValue: true, //选中后清空搜索框
                //使用onChange onBlur
                onChange: (value) => {
                  handleChange(value);
                  return value; //必须要return一个值出去 表单项才会展示值在输入框上
                },
              }}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              name="period"
              label="计量周期"
              disabled
              initialValue={'年'}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="value"
              label="计量值"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
          <Col span={12}>
            <Form.Item
              name="unit"
              label="计量单位"
              rules={[{ required: true, message: '请输入计量单位!' }]}
            >
              <Select
                placeholder="请选择计量单位"
                options={orderOptions}
                onChange={handleChange}
                disabled={createOrUpdate}
              />
            </Form.Item>
          </Col>
        </Row>
        <ProFormText
          name="area"
          label="生产区域"
          disabled={createOrUpdate}
          width={350}
          rules={[{ required: true, message: '请输入 your period!' }]}
        />
      </ModalForm>
      {/* 月 */}
      <ModalForm
        visible={modalVisit2}
        title={formTitle2}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setModalVisit2(false);
          },
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="uniqueIdentifier"
          label="唯一标识"
          hidden={true}
          initialValue={111}
          disabled={createOrUpdate}
        />
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="deviceName"
              label="设备名称"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
          <Col span={12}>
            <ProFormSelect
              name="deviceId"
              label="设备编号"
              disabled={createOrUpdate}
              options={deviceId}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormSelect
              name="energyItem"
              width={350}
              label="能源介质"
              disabled={createOrUpdate}
              valueEnum={{
                水: '水',
                电: '电',
                气: '气',
              }}
              rules={[{ required: true, message: '请输入 your period!' }]}
              fieldProps={{
                autoClearSearchValue: true, //选中后清空搜索框
                //使用onChange onBlur
                onChange: (value) => {
                  handleChange(value);
                  return value; //必须要return一个值出去 表单项才会展示值在输入框上
                },
              }}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              name="period"
              label="计量周期"
              disabled
              initialValue={'月'}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="value"
              label="计量值"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
          <Col span={12}>
            <Form.Item
              name="unit"
              label="计量单位"
              rules={[{ required: true, message: '请输入计量单位!' }]}
            >
              <Select
                placeholder="请选择计量单位"
                options={orderOptions}
                onChange={handleChange}
                disabled={createOrUpdate}
              />
            </Form.Item>
          </Col>
        </Row>
        <ProFormText
          name="area"
          label="生产区域"
          disabled={createOrUpdate}
          width={350}
          rules={[{ required: true, message: '请输入 your period!' }]}
        />
      </ModalForm>
      {/* 日 */}
      <ModalForm
        visible={modalVisit3}
        title={formTitle3}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setModalVisit3(false);
          },
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="uniqueIdentifier"
          label="唯一标识"
          hidden={true}
          initialValue={111}
          disabled={createOrUpdate}
        />
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="deviceName"
              label="设备名称"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
          <Col span={12}>
            <ProFormSelect
              name="deviceId"
              label="设备编号"
              disabled={createOrUpdate}
              options={deviceId}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormSelect
              name="energyItem"
              width={350}
              label="能源介质"
              disabled={createOrUpdate}
              valueEnum={{
                水: '水',
                电: '电',
                气: '气',
              }}
              rules={[{ required: true, message: '请输入 your period!' }]}
              fieldProps={{
                autoClearSearchValue: true, //选中后清空搜索框
                //使用onChange onBlur
                onChange: (value) => {
                  handleChange(value);
                  return value; //必须要return一个值出去 表单项才会展示值在输入框上
                },
              }}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              name="period"
              label="计量周期"
              disabled
              initialValue={'日'}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="value"
              label="计量值"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入 your period!' }]}
            />
          </Col>
          <Col span={12}>
            <Form.Item
              name="unit"
              label="计量单位"
              rules={[{ required: true, message: '请输入计量单位!' }]}
            >
              <Select
                placeholder="请选择计量单位"
                options={orderOptions}
                onChange={handleChange}
                disabled={createOrUpdate}
              />
            </Form.Item>
          </Col>
        </Row>
        <ProFormText
          name="area"
          label="生产区域"
          disabled={createOrUpdate}
          width={350}
          rules={[{ required: true, message: '请输入 your period!' }]}
        />
      </ModalForm>
    </PageHeaderWrapper>
  );
};
export default EnergyInfo;
